//全局样式
html {
  background-color: #eff1f7;
}

@mixin textEllipsis {
  //文本超出一行略号
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//webkit内核浏览器 滚动条大小
::-webkit-scrollbar {
  width: 00px;
  height: 0px;
  background-color: transparent;
}

::-moz-scrollbar {
  width: 0px;
  height: 0px;
  background-color: red;
}

::-ms-scrollbar {
  width: 0px;
  height: 0px;
  background-color: transparent;
}


//webkit内核浏览器 滚动条上的滚动滑块 边框圆角
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}

//webkit内核浏览器 滚动条上的滚动滑块 鼠标经过显示背景颜色
:hover::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 53%, 0.4);
}

//webkit内核浏览器 滚动条轨道 鼠标经过背景颜色
:hover::-webkit-scrollbar-track {
  background-color: hsla(0, 0%, 53%, 0.1);
}


//暂无数据-样式
.y9-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--el-text-color-secondary);
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  //水平垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-horizontal-center {
  //仅水平居中
  display: flex;
  justify-content: center;
}

.flex-vertical-center {
  //仅垂直居中
  display: flex;
  align-items: center;
}

.inline-flex-center {
  //内联水平垂直居中
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inline-flex-horizontal-center {
  //内联仅水平居中
  display: inline-flex;
  justify-content: center;
}

.inline-flex-vertical-center {
  //内联仅垂直居中
  display: inline-flex;
  align-items: center;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-start {
  display: flex;
}

.index-layout-setting-list {
  .el-drawer__header {
    margin-bottom: 18px !important;
  }
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-right-10 {
  margin-right: 10px;
}

//全局变量
$borderBottom: solid 1px #ebeef5; //分割线

$padding: 16px; //内填充

$btnHeight: 30px; //按钮高度

$textFontSize: 14px; //文本字体大小

$titleFontSize: 16px; //标题字体大小

$iconColor: #909399; //图标颜色

$iconFontSize: 18px; //图标大小

$boxShadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.06); //阴影

$hoverBgColor: rgb(231, 236, 237);

//全局按钮
.el-button {
  box-shadow: $boxShadow;

  i {
    margin-right: 4px;
  }
}

//主按钮
.global-btn-main {
  background-color: var(--el-color-primary) !important;
  color: var(--el-color-white) !important;
  border: none !important;
}

.global-btn-main:hover {
  background-color: var(--el-button-hover-bg-color) !important;
}

//次要按钮
.global-btn-second {
  border-color: var(--el-color-primary) !important;
  color: var(--el-color-primary) !important;
  // border: none !important;
  background-color: #fff;
}

.global-btn-second:hover {
  background-color: var(--el-button-hover-bg-color) !important;
}

//第三种按钮样式
.global-btn-third {
  background-color: transparent !important;
  color: var(--el-color-primary) !important;
  border: solid 1px var(--el-color-primary) !important;
}

:deep(.el-message) {

  z-index: 10000 !important;

}

:deep(.el-select) {
  width: 100%;
}

//自定义验证符号 * 的样式
.custom-validator-symbol {
  color: red;
  margin-left: 4px;
}

//自定义验证文字的样式
.custom-validator-text {
  color: red;
  font-size: 0.5rem;
  margin-top: 4px;
  line-height: 0.5rem;
}

@media screen and (max-width: 400px) {
  .el-message-box {
    width: 80% !important;
  }
}

/** 描述列表 */
:deep(.el-descriptions__table) {
  tr {
    height: 45px;
  }

  .el-descriptions__title {
    font-weight: normal;
  }

  .el-descriptions__label {
    width: 15% !important;
    text-align: center !important;
  }

  .el-descriptions__cell {
    min-width: 100px !important;
    font-size: v-bind(baseFontSize) !important;

    div {
      font-size: v-bind(baseFontSize);
    }

    .el-form-item__error {
      font-size: 14px;
    }

    .el-radio__label {
      font-size: v-bind(baseFontSize);
    }
  }

  .el-descriptions__content {
    min-width: 100px;
    width: 35% !important;

    .el-select,
    .el-date-editor {
      width: 100%;
    }

  }
}

:deep(.y9-dialog-content .el-descriptions__table) {
  .el-descriptions__label {
    width: 12% !important;
    text-align: center !important;
  }
}

/*描述列表 end*/
//自定义验证符号 * 的样式
.custom-validator-symbol {
  color: red;
  margin-left: 4px;
}

//自定义验证文字的样式
.custom-validator-text {
  color: red;
  font-size: 0.5rem;
  margin-top: 4px;
  line-height: 0.5rem;
}

.y9-title {
  margin: 40px 0 20px 0;
  font-size: v-bind('fontSizeObj.mediumFontSize');
  // font-weight: bold;
  // color: #409eff;
}


.y9-code {
  font-size: v-bind('fontSizeObj.mediumFontSize');
  line-height: 1.5rem;
  background-color: #055a5b;
  color: #fff;
  border-radius: 4px;
  text-align: left;
  overflow: auto;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;

  code {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }

}
